<template>
  <div class="subPage">
    <div class="pageTop">
      <div class="headimg marginBtm">
        <span class="cellTitle">个人照片</span>
        <div class="headFr fr" @click="chooseImg">
          <img v-if="info.head_portrait" :src="info.head_portrait" class="personPhoto"/>
          <div v-if="!info.head_portrait" class="nopersonPhoto"></div>
          <img :src="rightImg" class="linkPhoto"/>
        </div>
      </div>
      <div class="item borderBtm">
        <span class="cellTitle">手机号码</span>
        <div class="headFr fr">
          <input class="color666 rightInput"  type="number" v-model="info.phone" maxlength="11" placeholder="手机号码" disabled="true">
          <!-- <div  class="color666" v-if="info.phone">{{info.phone}}</div> -->
          <img :src="rightImg" class="linkPhoto"/>
        </div>
      </div>
      <div class="item marginBtm">
        <span class="cellTitle">身份证号码</span>
         <div class="headFr fr" v-if="info.isreal==0">
          <div  class="color666" v-if="info.cert_id">{{info.cert_id}}</div>
          <!-- <input type="idcard" class="color666 rightInput" v-model="info.cert_id" maxlength="18" placeholder="身份证号码"> -->
          <img :src="rightImg" class="linkPhoto"/>
        </div>
        <div class="headFr fr" v-else>
          <div  class="color666" v-if="info.cert_id">{{info.cert_id}}</div>
          <img :src="rightImg" class="linkPhoto"/>
        </div>
      </div>
      <div class="item borderBtm">
        <span class="cellTitle">姓名</span>
        <div class="headFr fr">
          <input  placeholder="姓名" type="text" class="color666 fr rightInput" style="text-align:right" v-model="info.patient_name" :disabled="disabled"/>
          <img :src="rightImg" class="linkPhoto"/>
        </div>
      </div>
      <div class="item borderBtm">
        <span class="cellTitle">性别</span>
        <div class="headFr fr">
          <!-- <input type="text" class="color666 rightInput" v-model='info.sex' maxlength="2" placeholder="性别" v-if="info.isreal==0"> -->
          <picker slot="footer" :value="info.sex" @change="sexchange" v-if="info.isreal==0" :range="sexList"  >
            <div class="picker">
              <span class="color666" v-if="info.sex">{{info.sex}}</span>
              <view class="picker color666" v-else>请选择性别</view>
            </div>
          </picker>
          <div  class="color666" v-else>{{info.sex}}</div>
          <img :src="rightImg" class="linkPhoto"/>
        </div>
      </div>
      <div class="item borderBtm">
        <span class="cellTitle">生日</span>
        <div class="headFr fr">
            <picker mode="date" :value="date" start="1970-01-01"  v-if="info.isreal==0" :end="end" @change="bindDateChange">
              <view class="picker color666" v-if="info.birth_day">
                {{info.birth_day}}
              </view>
              <view class="picker color666" v-else>
                请选择生日
              </view>
            </picker>
          <div  class="color666" v-else>{{info.birth_day}}</div>
          <img :src="rightImg" class="linkPhoto"/>
        </div>
      </div>
      <div class="itemType clearfix">
        <span class="cellTitle">患者类型</span>
        <div class="fr init clearfix">
          <div  style="margin-right: 20rpx;display:flex">
            <div v-for="(item, index) in list" :key='index' class="clearfix type" v-if="index === 0 || index === 1" @click="changeItem(item,index)">
              <img v-if="!item.isSelect" :src="selectFalseImg" class="fl"/>
              <img v-if="item.isSelect" :src="selectTrueImg" class="fl"/>
              <span class="fl color666">{{item.name}}</span>
            </div>
          </div>
          <div style="margin-right: 20rpx;display:flex">
            <div v-for="(item, index) in list" :key='index' class="clearfix type" v-if="index === 2 || index === 3" @click="changeType(item)">
              <img v-if="!item.isSelect" :src="selectFalseImg" class="fl"/>
              <img v-if="item.isSelect" :src="selectTrueImg" class="fl"/>
              <span class="fl color666">{{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item clearfix" v-if="list[0].isSelect||list[1].isSelect" style="border-top: 1rpx solid #E9E9E9; box-sizing: border-box;width: 100%;">
        <span class="cellTitle fl">医保卡正面</span>
        <div class="yibao clearfix fr" @click="chooseMedicare">
          <img :src="rightImg" class="linkPhoto fr"/>
          <div v-if="!info.medicare_card_image_key" class="nopersonPhoto fr"></div>
          <img  v-if="info.medicare_card_image_key" :src="info.medicare_card_image" alt="" class="nopersonPhoto fr">
          <div class="fr" v-if="info.medicare_card_image_key">{{info.medicare_card?info.medicare_card:'获取失败'}}</div>
          
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="item borderBtm" style="margin-top: 16rpx;">
        <span class="cellTitle">紧急联系人</span>
        <div class="headFr fr">
          <input  placeholder="紧急联系人"  type="text" class="color666 fr" maxlength="20" style="text-align:right" v-model="info.emgc_contact_name"/>
          <img :src="rightImg" class="linkPhoto"/>
        </div>
      </div>
      <div class="item">
        <span class="cellTitle">紧急联系人电话</span>
        <div class="headFr fr">
          <input  placeholder="紧急联系人电话"  type="number" maxlength="11" class="color666 fr" style="text-align:right;width: 300rpx;" v-model="info.emgc_contact_phone"/>
          <img :src="rightImg" class="linkPhoto"/>
        </div>
      </div>

    </div>
    <div class="pageBtm">
      <div class="bottomDiv" @click="postUserinfo">
        <span class="recode">确定</span>
        <img :src="btnBgImg" />
      </div>
    </div>
    <i-message id="message" />
     <i-toast id="toast" />
  </div>
</template>
<script>
  let app = getApp()
  import api from '@/api/api'
  const { $Toast, $Message } = require('../../../../../static/iview/base/index')
  export default {
    data() {
      return {
        disabled:false,
        info: {
          head_portrait: '',
          medicare_card: '',
          medicare_card_image_key: ''
        },
        sexList:['男','女'],
        list: [
          {
            num: '1',
            isSelect: false,
            name: '居民医保'
          },
          {
            num: '2',
            isSelect: false,
            name: '城镇医保'
          },
          {
            num: '3',
            isSelect: false,
            name: '公费医疗'
          },
          {
            num: '4',
            isSelect: false,
            name: '自费'
          }
        ],
        end:'',
        date:'',
        checkDay:false,
        imgUrl: '',
        rightImg: '',
        selectFalseImg: '',
        selectTrueImg: '',
        btnBgImg: ''
      }
    },
    mounted() {
      this.imgUrl = api.imgUrl
      this.rightImg = this.imgUrl + 'right.png'
      this.selectFalseImg = this.imgUrl + 'selectFalse.png'
      this.selectTrueImg = this.imgUrl + 'selectTrue.png'
      this.btnBgImg = this.imgUrl + 'btnBg.png'
      this.queryUserinfo()
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth()+1
      month = month<10?'0'+month:month 
      var day = date.getDate()
      this.end = year +'-'+month+'-01'
      console.log('  this.end ',  this.end )
    },
    methods: {
      bindDateChange(e){
        console.log(e)
        this.info.birth_day = e.target.value
      },
      sexchange(e){
        console.log(e)
        if( e.target.value==0){
           this.info.sex ='男'
        }else{
           this.info.sex ='女'
        }
       
      },
      checkBirth(){
        this.checkDay = true
        console.log(' this.checkDay', this.checkDay)
      },
      // 上传头像
      chooseImg () {
        let that = this
        mpvue.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album'],
          success (res) {
            mpvue.uploadFile({
              url: api.host + '/api/emr/upload_image',
              filePath: res.tempFilePaths[0],
              name: 'file',
              success (res){
                let data = JSON.parse(res.data)
                that.info.head_portrait = data.data[0].file_url,
                that.info.headImg = data.data[0].file_key
              }
            })
          }
        })
      },
      // 上传医保卡
      chooseMedicare () {
        let that = this
        let hiseeToken = that.$storage.getToken() || ''
        mpvue.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album'],
          success (res) {
            console.log(res.tempFilePaths[0])
            wx.showLoading({
              title: "上传中...",
              mask: true
            });
            mpvue.uploadFile({
              url: api.host + '/api/user/medicare_card/upload',
              filePath: res.tempFilePaths[0],
              name: 'file',
              header: {
                Authorization: 'Bearer ' +  hiseeToken
              },
              success (res){
                // debugger
                let data = JSON.parse(res.data)
                if (!data.data || data.data===null) {
                  $Message({
                    content: '医保卡信息识别失败请重新上传',
                    type: 'warning'
                  })
                  wx.hideLoading()
                  return
                }
                else {
                  $Message({
                    content: '上传成功',
                    type: 'success'
                  })
                }
                wx.hideLoading()
                that.$set(that.info, 'medicare_card', data.data.card)
                that.$set(that.info, 'medicare_card_image_key', data.data.file_key)
                that.$set(that.info, 'medicare_card_image', data.data.file_url)
              }
            })
          }
        })
        wx.hideLoading()
      },
      // 提交
      postUserinfo () {
        let that = this
        let arr = []
        for (let i = 0; i < that.list.length; i++) {
          if (that.list[i].isSelect) {
            arr.push(that.list[i].num)
          }
        }
        that.info.patient_type = arr.join(',')
        if (that.list[0].isSelect) {
          if (!that.info.medicare_card) {
            $Message({
              content: '请上传医保卡',
              type: 'warning'
            })
            return
          }
        }
         var ph_reg = /^1[34578]\d{9}$/
             if(!ph_reg.test(this.info.phone)){
                 $Toast({
                    content: '请输入合法手机号',
                    type: 'warning'
                })
                return
            }
        var reg =  /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        // if(!reg.test(this.info.cert_id)&&that.info.isreal!='1'){
        //     $Toast({
        //         content: '请输入合法身份证号',
        //         type: 'warning'
        //     })
        //     return 
        // }
        var ph_reg = /^1[34578]\d{9}$/
        if(this.info.emgc_contact_phone){
          if(!ph_reg.test(this.info.emgc_contact_phone)){
                $Toast({
                    content: '请输入合法手机号',
                    type: 'warning'
                })
                return
          }
        }
        if(!this.info.patient_name){
           $Toast({
                    content: '请输入姓名',
                    type: 'warning'
                })
                return
        }
        if(!this.info.sex){
           $Toast({
                    content: '请选择性别',
                    type: 'warning'
                })
                return
        }
        
        let obj = {
          head_portrait: that.info.headImg,
          patient_type: that.info.patient_type,
          medicare_card_image: that.info.medicare_card_image_key,
          phone:this.info.phone,
          // cert_id:this.info.cert_id,
          patient_name:this.info.patient_name,
          sex:this.info.sex,
          birth_day:this.info.birth_day,
          emgc_contact_name:this.info.emgc_contact_name,
          emgc_contact_phone:this.info.emgc_contact_phone,
          // social_security_cards:this.info.social_security_cards
        }
        if (that.info.medicare_card&&that.info.medicare_card.indexOf('*')===-1) { // 判断医保卡是否有 * 号
          obj.medicare_card = that.info.medicare_card
        }
        console.log(obj,'修改信息')
        that.$api.updateUserinfo(obj, {'showLoading': true}).then((res) => {
           $Toast({
              content: '修改成功',
              type: 'success'
          })
          that.queryUserinfo()
          setTimeout(() => {
            wx.navigateBack({
                delta: 1
            })
          }, 500);
        })
      },
      // 查询个人信息
      queryUserinfo () {
        let that = this
        that.$api.queryUserinfo({}, {'showLoading': true}).then((res) => {
          that.info = res.data[0]
          if(that.info.isreal=='1'){
            //已认证
            this.disabled = true
          }else{
            this.disabled = false
          }
          if(this.info.birth_day==null){
            this.info.birth_day = ''
          }
          if (that.info.patient_type === '0') {
            for (let i = 0; i < that.list.length; i++) {
              that.list[i].isSelect = false
            }
          } else {
            let arr = that.info.patient_type.split(",")
            for (let i = 0; i < arr.length; i++) {
              for (let j = 0; j < that.list.length; j++) {
                if (arr[i] == that.list[j].num) {
                  that.$set(that.list[j], 'isSelect', true)
                }
              }
            }
          }
        })
      },
      changeType (item) {
        item.isSelect = !item.isSelect
      },
      changeItem(item,index){
        // item.isSelect = !item.isSelect
        console.log('this.list',this.list)
        if(index==0){
          this.list[0].isSelect = !this.list[0].isSelect
          if(this.list[0].isSelect == true){
            this.list[1].isSelect = false
          }
        }else if (index ==1){
          this.list[1].isSelect = !this.list[1].isSelect
          if(this.list[1].isSelect == true){
            this.list[0].isSelect = false
          }
        }
      }
    }
  }
</script>
<style scoped lang='less'>
  .subPage {
    background: #F9F9F9;
    display: flex;
    flex-direction: column;
    font-size: 36rpx;
  }
  .pageTop {
    flex: 1;
    overflow-y: auto;
    .cellTitle {
      font-size:36rpx;
      color: #333;
      margin-left: 30rpx;
    }
    .headimg {
      height: 120rpx;
      line-height: 120rpx;
      background: #fff;
    }
    .item {
      height: 100rpx;
      line-height: 100rpx;
      background: #fff;
      overflow: hidden;
      box-size: border-box;
    }
    .headFr {
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      align-items:center;
      overflow: hidden;
    }
    .yibao {
      height: 100rpx;
      line-height: 100rpx;
      img {
        display: inline-block!important;
        margin-top: 35rpx;
      }
    }
    .personPhoto {
      width:80rpx;
      height:80rpx;
      border-radius:4rpx;
    }
    .nopersonPhoto {
      width:80rpx;
      height:80rpx;
      border-radius:4rpx;
      background: #E9E9E9;
      display: inline-block;
      margin-top: 10rpx;
    }
    .marginBtm {
      margin-bottom: 16rpx;
    }
    .borderBtm {
      border-bottom: 1rpx solid #E9E9E9;
    }
    .itemType {
      padding: 25rpx 30rpx 25rpx 0;
      background: #fff;
      height: 115rpx;
      .type {
        margin-bottom: 20rpx;
        margin-right: 20rpx;
      }
      img {
        width: 43rpx;
        height: 43rpx;
        margin-right: 18rpx;
      }
    }
  }
  .linkPhoto {
    width: 17rpx;
    height: 30rpx;
    margin-left: 20rpx;
    margin-right: 30rpx;
  }
  .color666 {
    color: #666!important;
    display: inline-block;
  }
  .rightInput{
    text-align: right;
  }
</style>
